<template>
    <div id="bar3">
    </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    name: "echarts",
    data: function () {
        return {

        }
    },
    mounted: function () {
        this.echartsInit();
    },
    methods: {
        echartsInit() {
            echarts.init(document.getElementById('bar3')).setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['6~8点', '10~12点', '16~18点', '18~20点', '2~4点'],
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        splitLine: { show: false },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: 'Direct',
                        type: 'bar',
                        barWidth: '60%',
                        data: [5, 3, 4, 5, 2]
                    }
                ]
            })
        }
    }
}
</script>

<style scoped lang="less">
#bar3 {
    width: 360px;
    height: 200px;
    margin: 0 auto;
    margin-top: -40px;

    div {
        width: 100%;
        height: 100%;
    }
}
</style>